<div class="view vote-view">
  <div class="view-title">
    <div class="vote-name-title">
      {{ vote.name }}
    </div>

    <div class="rounds-indicator">
      <span class="rounds-current" v-if="vote.status.iteration > 0">第{{ vote.status.iteration }}轮</span>
      <span class="rounds-current" v-else>未启动</span>
      <span class="rounds-total-wrapper" v-if="vote.rounds > 0">
        <span class="rounds-separator">/</span>
        <span class="rounds-total">共{{ vote.rounds }}轮</span>
      </span>
    </div>

    <div class="vote-indicator">
      <span class="total-count">
        <i class="material-icons vote-indicator-hint">person</i>
        <span class="vote-indicator-value">
          {{ vote.matrix.length }}
        </span>
      </span>
      <span class="positive-count">
        <span class="vote-indicator-hint">
          赞成
        </span>
        <span class="vote-indicator-value">
          {{ positiveCount }}
        </span>
      </span>
      <span class="negative-count">
        <span class="vote-indicator-hint">
          反对
        </span>
        <span class="vote-indicator-value">
          {{ negativeCount }}
        </span>
      </span>
      <span class="abstained-count">
        <span class="vote-indicator-hint">
          弃权
        </span>
        <span class="vote-indicator-value">
          {{ abstainedCount }}
        </span>
      </span>
      <span class="target-count" v-if="vote.target > 0">
        <span class="vote-indicator-hint">
          目标
        </span>
        <span class="vote-indicator-value">
          {{ vote.target }}
        </span>
      </span>
      <span class="target-count" v-if="vote.target === -1">
        <span class="vote-indicator-hint">
          目标 - 不计弃权 2/3
        </span>
        <span class="vote-indicator-value">
          {{ fileTwoThird }}
        </span>
      </span>
    </div>

    <div class="vote-actions">
      <template v-if="authorized">
        <button class="light" @click="stop()" v-if="vote.status.running">
          <i class="material-icons">done</i>
          结束第{{ vote.status.iteration }}轮
        </button>
        <template v-else>
          <button class="light" @click="start()" v-if="emptyCount === 0 || altHold">
            <i class="material-icons">play_arrow</i>
            手动进行第{{ vote.status.iteration + 1 }}轮
          </button>
          <button class="light" @click="autoStart()" v-else>
            <i class="material-icons">play_arrow</i>
            开始第{{ vote.status.iteration + 1 }}轮
          </button>
        </template>
    </template>
      <button class="light" @click="project()">
        <i class="material-icons" title="Update Cast">cast</i>
      </button>
    </div>
  </div>

  <div class="voters list">
    <div
      class="voter list-item"
      v-for="voter of mat"
      track-by="originalId"
      transition="item"
      :class="{ positive: voter.vote === 1, abstained: voter.vote === -1, negative: voter.vote === -2, clickable: authorized }"
      @click="manipulate(voter)">

      <div class="list-item-indicator"></div>
      <div class="list-item-content">{{ voter.name }}</div>
    </div>
  </div>

  <div class="dialog-overlap" transition="opacity" v-show="manipulateFlag" @click="discardManipulation">
    <div class="dialog wide" @click.stop.prevent>
      <div class="dialog-title">{{ targetVoter.name }}</div>
      <div class="dialog-content">
        <div class="list">
          <div class="list-item clickable" v-for="row in VOTE_ROWS" @click="targetVote = row.code" :class="{ bold: targetVote === row.code }">
            <div class="list-item-indicator"></div>
            <div class="list-item-content">{{ row.text }}</div>
          </div>
        </div>
        <button @click="performManipulation" class="confirmation-btn">
          确定
          <i class="material-icons">keyboard_arrow_right</i>
        </button>
        <div class="clearfix"></div>
      </div>
    </div>
  </div>
</div>
